<template>
	<view class="content">
		<image class="logo" @click="change" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view v-if="!raining">今天天气真好</view>
		<view v-if="raining">下雨天，只能在家呆着了</view>
		<view v-if="state === 'vue'">state的值是 Vue</view>
		<view>State is {{ state ? 'vue' : 'APP' }}</view>
		<view>
			<view v-if="state === 'vue'">uni-app</view>
			<view v-else-if="state === 'html'">HTML</view>
			<view v-else>APP</view>
		</view>
		<view v-for="item in arr" style="color: #ff0000;">
			{{ item }}
		</view>
		<view v-for="(item, index) in 7" style="color: #00ff00;">
			<view :class="'list-' + index%2">{{ index%2 }}</view>
		</view>
		<view v-for="(value, name, index) in object">
			{{ index }}. {{ name }}: {{ value }}
		</view>
		<view v-for="item in arr" :key="item.id">
			<view style="color: #0000ff;">{{ item.id }}:{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uni-app',
				raining: false,
				state: 'vue',
				arr: [{
						id: 1,
						name: 'uni-app'
					},
					{
						id: 2,
						name: 'HTML'
					},
					{
						id: 3,
						name: 'Android'
					},
					{
						id: 4,
						name: 'C++'
					},
					{
						id: 5,
						name: 'python'
					}
				],
				object: {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2020-04-10',
					todayweather: 'Sunny',
					time: '2025-9-30',
					Myname: 'Huang Sujing'
				},

				methods: {
					change() {

					}
				}
			}
		}
	};
</script>

<style>
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.logo {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}
</style>